<template>
  <section class="todoapp">
    <!-- 头部部分 -->
    <ToHeader @add="add" />
    <!-- 主体部分 -->
    <ToBody :list="list" @del="del" />

    <!-- 底部部分 -->
    <ToFooter @clear="clear" />
  </section>
</template>

<script>
import ToBody from './components/ToBody.vue'
import ToHeader from './components/ToHeader.vue'
import ToFooter from './components/ToFooter.vue'

export default {
  components: {
    ToBody,
    ToHeader,
    ToFooter
  },
  data () {
    return {
      type: 'all',
      list: [
        {
          id: 1,
          name: '读万卷书',
          done: true
        },
        {
          id: 2,
          name: '行万里路',
          done: true
        },
        {
          id: 3,
          name: '锤子吃',
          done: false
        }
      ]
    }
  },
  methods: {
    del (id) {
      this.list = this.list.filter(item => item.id !== id)
    },
    add (value) {
      const obj = { id: this.id, name: value, done: false }
      this.list = [...this.list, obj]
    },
    clear () {
      this.list = this.list.filter(item => !item.done)
    }
  }
}
</script>

<style></style>
